<template>
	<view class="content">
		<view class="main">

			<view v-for="(item,index) in data_list" class="item_data" @click.stop="onItemClick(JSON.stringify(item))">
				<!-- 左边:内容 -->
				<view class="item_left_div">
					<view style="font-weight: bold;font-size: 30rpx;">运单号:{{item.order_sn}}</view>
					<view style="font-size: 22rpx;color: #666;margin: 6rpx 0 12rpx 0;">{{timestampToYMDHM(item.createtime)}}</view>
					<!-- 0 待处理 1 审核通过 2 审核拒绝 -->
					<view v-if="item.status == 0" class="tag_1">待处理</view>
					<view v-if="item.status == 1" class="tag_2">已通过</view>
					<view v-if="item.status == 2" class="tag_3">已拒绝</view>
				</view>
				<!-- 右边:详情按钮 -->
				<view>
					<view style="color: #4387F6;">详情 > </view>
					<view style="color: orangered;margin: 10rpx 0 0 0;" @click.stop="onDel(item)">删除 x </view>
				</view>
			</view>

			<view v-if="!data_list || data_list.length <= 0" style="width: 100%;line-height: 40vh;text-align: center;">暂无数据~</view>

		</view>
	</view>
</template>

<script>
	import { getUInfo, isEmpty, timestampToYMDHM } from '@/util/util.js'
	export default {
		data() {
			return {
				data_list: [], // 数据列表

				curr_page: 1,
				limit: 20,
			}
		},

		onLoad() {
			this.getDataList()
		},

		onPullDownRefresh() {
			this.data_list = []
			this.curr_page = 1
			this.getDataList()
		},

		onReachBottom() {
			this.curr_page++
			this.getDataList()
		},

		methods: {

			// 删除列表项
			onDel(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: (res) => {
						if (res.confirm) {
							that.delData(item)
						}
					}
				})
			},
			// 点击数据项
			onItemClick(item_str) {
				uni.setStorageSync('hd_detail', item_str)
				uni.navigateTo({ url: '/pages/ycsb/hd_detail' })
			},

			// 接口:获取数据列表
			async getDataList() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getHdList({ token, page: this.curr_page, limit: this.limit })
				// console.log('getHdList.res = ', res);
				if (res.code == 1) {
					if (!res.data.data || res.data.data.length <= 0) {
						uni.showToast({ icon: 'none', title: '暂无更多数据' })
						return
					}
					this.data_list = this.data_list.concat(res.data.data)
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},
			// 接口:删除数据
			async delData(item) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '删除中..', mask: true, })
				let res = await that.$delReceipt({ token, id: item.id })
				if (res.code == 1) {
					uni.showToast({ title: res.msg, icon: 'none' })
					uni.startPullDownRefresh({})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			timestampToYMDHM(ts) {
				return timestampToYMDHM(1000 * ts, '-', ':')
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		/* background-color: #f0f0f0; */
	}

	.main {
		margin: 24rpx;
		padding: 24rpx;
		background: white;
		border-radius: 24rpx;
	}

	.item_data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
		padding: 24rpx 0 12rpx 0;
		border-bottom: solid 1rpx #ddd;
	}

	.item_left_div {
		display: flex;
		flex-direction: column;
	}

	.tag_1 {
		font-size: 20rpx;
		color: #AC731D;
		background: #FEF9C3;
		width: 90rpx;
		text-align: center;
	}

	.tag_2 {
		font-size: 20rpx;
		color: #298C4E;
		background: #DCFCE7;
		width: 90rpx;
		text-align: center;
	}

	.tag_3 {
		font-size: 20rpx;
		color: #C23636;
		background: #FEE2E2;
		width: 90rpx;
		text-align: center;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}
</style>